<template>
    <!-- <transition name="fade"> -->
    <div class="monitorContainer">
        <div class="video">
            <ul>  
                <li v-for="(item, index) in xqN" :key="index" :class="index === selected ? 'select' : ''" @click="selected = index">{{item}}</li>
            </ul>
            <div v-show="type === 'monitor'" class="showVideo">
                <div class="item" @click="show = true">
                    <img src="../assets/img/3.png" alt="">
                    <header>监控一</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/4.png" alt="">
                    <header>监控二</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/3.png" alt="">
                    <header>监控三</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/4.png" alt="">
                    <header>监控四</header>
                </div>
                <div v-if="show" class="showmonitor">
                    <div class="close" style="width: 30px; height: 30px; background-color: #07173d; position: absolute; right: 0; top: 0; z-index: 1020; display: flex;justify-content: center;
  align-items: center;" @click="show = false">
                        <img src="../assets/img/close.png" alt="" style="height: 16px">
                    </div>
                    <img src="../assets/img/3.png" alt="">
                </div>
            </div>
            <div v-show="type === 'thermalImage'" class="showVideo">
                <div class="item" @click="show = true">
                    <img src="../assets/img/1.jpg" alt="">
                    <header>监控一</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/2.jpg" alt="">
                    <header>监控二</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/1.jpg" alt="">
                    <header>监控三</header>
                </div>
                <div class="item" @click="show = true">
                    <img src="../assets/img/2.jpg" alt="">
                    <header>监控四</header>
                </div>
                <div v-if="show" class="showmonitor">
                    <div class="close" style="width: 30px; height: 30px; background-color: #07173d; position: absolute; right: 0; top: 0; z-index: 1020; display: flex;justify-content: center;
  align-items: center;" @click="show = false">
                        <img src="../assets/img/close.png" alt="" style="height: 16px">
                    </div>
                    <img src="../assets/img/2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- </transition> -->
</template>

<script>
export default {
    name: "monitor",
    props: ["type"],
    data() {
        return {
            selected: 0,
            xqN: ["金凯地小区", "尖家兜小区", "浔溪秀城小区"],
            show: false
        }
    },
    mounted() {
        console.log(this.type);
    }
}
</script>

<style scoped>
.monitorContainer {
    width: 75%;
    height: 75%;
    color: #fff;
    background-color: #09142a;
    /* background-color: rgba(7, 26, 67, .8); */
    border: 2px solid #54abef;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
}

.monitorContainer >header {
    text-align: center;
    padding: 12px 0;
    border-bottom: 1px solid #b3b3b3;
}
.monitorContainer .video {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.monitorContainer .video >ul {
    flex: 2;
    text-align: center;
    border-right: 2px solid #54abef;
    padding: 24px 24px 0;
    overflow-y: scroll;
}
.monitorContainer .video >ul li {
    font-size: 16px;
    color: #B4F2FF;
    background: rgba(35, 160, 226, 0.2);
    padding: 12px 0;
    margin-bottom: 24px;
    border-radius: 24px;
}
.monitorContainer .video >ul li.select {
    color: #fff;
    background: rgba(35, 160, 226, 0.8);
}
.monitorContainer .video .showVideo {
    padding: 12px 12px 0;
    flex: 8;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    position: relative;
}
.video .showVideo .item {
    width: 24%;
    height: 200px;
    display: flex;
    flex-direction: column;
}
.video .showVideo .item img {
    flex: 1;
    object-fit: cover;
}
.video .showVideo .item header {
    padding: 6px 0;
    text-align: center;
}
.video .showVideo .showmonitor {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1010
}
.video .showVideo .showmonitor img {
    width: 100%;
    height: 100%;
}
/* 过渡动画 */
.fade-enter-from {
    transform: translateY(-300px);
}
.fade-enter-active {
    transition: transform .4s ease;
}
.fade-enter-to {
    transform: translateY(15px);
}
.fade-leave-from {
    transform: translateY(15px);
}
.fade-leave-active {
    transition: transform .4s ease-in;
}
.fade-leave-to {
    opacity: 0;
}
</style>